{% extends "base.html" %} {% block content %}

    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h4 class="box-title">日志查询<small> 相关日志查询</small></h4>
                </div>
                <div class="box-body">
                    <form class="form-horizontal" id="form_modify_pass" action="/log/search/" method="post">
                        <div class="form-group">
                            <label class="col-sm-1 control-label">网站域名</label>
                            <div class="col-sm-4">

                                    <input type="text" class="form-control" name="domain_name" placeholder="待查询网站域名" style="width: 450px" >

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-1 control-label">开始时间</label>
                            <div class="col-sm-4">
                                <input type="text" name="date" class="tcal" value="" style="width: 450px" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-1 control-label">终止时间</label>
                            <div class="col-sm-4">
                                <input type="text" name="date" class="tcal" value="" style="width: 450px" />
                            </div>
                        </div>
                        <div class="box-footer">
                            <!-- <button type="submit" class="btn btn-default">Cancel</button> -->
                            <button type="submit" class="btn btn-info pull-right" >查询</button>

                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h4 class="box-title">日志信息<small> 查询结果</small></h4>
                </div>
                <div class="box-body">
                    <table class="table table-striped">
                        <tr>

                            <th >IP</th>
                            <th >域名</th>
                            <th >时间</th>
                            <th >详情</th>
                            <th >终端</th>
                        </tr>


                        {% if information != null %}
                        <tbody>
                        <tr >

                            <td>10.62.168.12</td>
                            <td>{{ information.name }}</td>
                            <td>2017-06-22 10:01:25</td>
                            <td>Get /server</td>
                            <td>Chrome</td>

                        </tr>

                        </tbody>
                        {% endif %}

                    </table>
                </div>

            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h4 class="box-title">日志信息<small> 请求来源</small></h4>
                </div>
                <div class="box-body">
                    <div id="map"></div>

                </div>
                <a href="#" class="button tipped" data-title="Great New Tooltip"
                           data-tipper-options='{"direction":"right","follow":"true"}'>Right</a>

            </div>
        </div>
    </div>




    <script>
        //init page
        $('#menu_system_config').addClass('active')
        $('#menu_service').removeClass('active')
        $('#page_header').text('日志分析')
        $('#page_header_descript').text('日志分析')
        $('#page_nav').text('日志分析')
        $('#page_name').text('日志分析')



    window.onload = function () {
    var R = Raphael("map", 600, 500);
	//调用绘制地图方法
    paintMap(R);

	var textAttr = {
        "fill": "#000",
        "font-size": "12px",
        "cursor": "pointer"
    };


    for (var state in china) {
		china[state]['path'].color = Raphael.getColor(0.9);

        (function (st, state) {

			//获取当前图形的中心坐标
            var xx = st.getBBox().x + (st.getBBox().width / 2);
            var yy = st.getBBox().y + (st.getBBox().height / 2);

            //***修改部分地图文字偏移坐标
            switch (china[state]['name']) {
                case "江苏":
                    xx += 5;
                    yy -= 10;
                    break;
                case "河北":
                    xx -= 10;
                    yy += 20;
                    break;
                case "天津":
                    xx += 10;
                    yy += 10;
                    break;
                case "上海":
                    xx += 10;
                    break;
                case "广东":
                    yy -= 10;
                    break;
                case "澳门":
                    yy += 10;
                    break;
                case "香港":
                    xx += 20;
                    yy += 5;
                    break;
                case "甘肃":
                    xx -= 40;
                    yy -= 30;
                    break;
                case "陕西":
                    xx += 5;
                    yy += 10;
                    break;
                case "内蒙古":
                    xx -= 15;
                    yy += 65;
                    break;
                default:
            }
			//写入文字
			china[state]['text'] = R.text(xx, yy, china[state]['name']).attr(textAttr);

            //click
			st[0].onclick = function () {

                st.animate({fill: st.color, stroke: "#eee"}, 500);
				china[state]['text'].toFront();
                R.safari();
            };
            st[0].onmouseout = function () {
                st.animate({fill: "#97d6f5", stroke: "#eee"}, 500);
				china[state]['text'].toFront();
                R.safari();
            };

         })(china[state]['path'], state);
    }
}


    </script>
{% endblock %}
